<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="商家名称" prop="shopname" style="margin-right: 100px;">
                <el-input v-model="queryParams.shopname" placeholder="请输入商家名称" clearable
                    @keyup.enter.native="handleQuery" style="width:150px" />
            </el-form-item>
            <el-form-item label="商家电话" prop="shoptel" style="margin-right: 100px;">
                <el-input v-model="queryParams.shoptel" placeholder="请输入商家电话" clearable
                    @keyup.enter.native="handleQuery" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" style="width:150px" />
            </el-form-item>
            <el-form-item label="商家负责人" prop="shopuser" style="margin-right: 100px;">
                <el-input v-model="queryParams.shopuser" placeholder="请输入商家负责人" clearable
                    @keyup.enter.native="handleQuery" style="width:150px" />
            </el-form-item>
            <el-form-item label="充值金额" style="margin-right: 100px;">
                <el-input v-model="queryParams.minmoney" placeholder="请输入最小金额" clearable
                    @keyup.enter.native="handleQuery" style="width:150px" />-
                <el-input v-model="queryParams.maxmoney" placeholder="请输入最大金额" clearable
                    @keyup.enter.native="handleQuery" style="width:150px" />
            </el-form-item>
            <el-form-item label="交易时间" style="margin-right: 1200px;">
                <el-date-picker v-model="queryParams.starttime" type="date" value-format="timestamp"
                    :picker-options="startDatePicker" placeholder="开始时间" style="width: 130px;margin-right: 30px;">
                </el-date-picker>
                <el-date-picker v-model="endtimes" type="date" value-format="timestamp"
                    :picker-options="endDatePicker" placeholder="结束时间" style="width: 130px">
                </el-date-picker>
            </el-form-item>
            <el-form-item style="margin-left: 80px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="flowList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <!-- <el-table-column label="订单编号" align="center" prop="shopordernum" /> -->
            <el-table-column label="商家名称" align="center" prop="shopname">
                <template slot-scope="scope">
                    <div><span>商家名称</span>{{ scope.row.phone }}</div>
                    <div><span>联系方式</span>{{ scope.row.wx }}</div>
                </template>
            </el-table-column>
            <el-table-column label="商家负责人" align="center" prop="shopuser" />
            <el-table-column label="合作模式" align="center" prop="shoptel" />
            <el-table-column label="充值类型" align="center" prop="payname" />
            <el-table-column label="充值金额" align="center" prop="money" />
            <el-table-column label="充值时间" align="center" prop="paytime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.paytime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark">
                <template slot-scope="scope">
                    <span v-if="scope.row.remark == ''">{{ '暂无' }}</span>
                    <p v-else>{{ scope.row.remark }}</p>
                </template>
            </el-table-column>
            <el-table-column label="客资账户数据" align="center" width="150">
                <template slot-scope="scope">
                    <div><span>当前客资余额：</span>{{ scope.row.shopcmMoney }}</div>
                    <div><span>累计客资充值：</span>{{ scope.row.shopcmMoney }}</div>
                </template>
            </el-table-column>
            <el-table-column label="当前成交余额" align="center" width="150">
                <template slot-scope="scope">
                    <div><span>当前客资余额：</span>{{ scope.row.shopdealMoney }}</div>
                    <div><span>累计客资充值：</span>{{ scope.row.shopdealMoney }}</div>
                </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="120"
              fixed="right"
            >
              <template slot-scope="scope">
                <div class="jyDetail" style="font-size: 12px !important">
                  <div class="transform_seller" @click="handlejy(scope.row)">
                    <img
                      src="@/assets/images/detail2.png"
                      alt=""
                      style="width: 14px; height: 14px"
                    />
                    <div style="color: #5672fa">交易明细</div>
                  </div>
                </div>
              </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

            <el-drawer
                title="交易明细"
                :visible.sync="drawer"
                :direction="direction"
                size="60%"
                :before-close="handleClose"
                >
                <div class="drawer">
                    <div class="search_bar1">
                    <div style="display: flex;justify-content: flex-start;align-items: center;width: 100%;margin-bottom: 10px;">
                        <div class="kz_name" style="margin-right: 30px;">
                        <div style="width: 36px; margin-right: 5px;">姓名</div>
                        <el-input
                        v-model="searchIpt1"
                        placeholder="请输入"
                        size="mini"
                        style="width: 150px"
                        ></el-input>
                    </div>
                    <div class="kh_status" style="margin-right: 30px;">
                        <div style="width: 36px; margin-right: 10px">账号</div>
                        <el-input
                        v-model="searchIpt2"
                        placeholder="请输入"
                        size="mini"
                        style="width: 150px"
                        ></el-input>
                    </div>
                    <div class="mobile" style="margin-right: 30px;">
                        <div style="width: 76px; margin-right: 10px">收支类型</div>
                        <el-select v-model="selectValue1" placeholder="请选择" size="mini">
                            <el-option
                            v-for="item in options1"
                            :key="item.selectValue1"
                            :label="item.label"
                            :value="item.selectValue1" size="small">
                            </el-option>
                        </el-select>
                    </div>
                    </div>
                    <div style="display: flex;justify-content: flex-start;align-items: center;width: 100%;">
                        <div class="mobile" style="margin-right: 30px;">
                            <div style="width: 76px; margin-right: 10px">交易类型</div>
                            <el-select v-model="selectValue2" placeholder="请选择" size="mini">
                                <el-option
                                v-for="item in options2"
                                :key="item.selectValue2"
                                :label="item.label"
                                :value="item.selectValue2" size="small">
                                </el-option>
                            </el-select>
                        </div>
                    <div class="fp_time" style="margin-right: 30px;">
                        <div style="width: 56px; margin-right: 10px">入职时间</div>
                        <el-date-picker
                        v-model="timePicker2"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        style="width: 328px"
                        >
                        </el-date-picker>
                    </div>
                    <div class="search_btn">
                        <el-button type="primary" size="small">查询</el-button>
                        <el-button size="small">重置</el-button>
                    </div>
                    </div>
                    </div>

                    <div class="table_part">
                    <el-table
                        v-loading="loading"
                        :data="detailList2"
                        @selection-change="handleSelectionChange3"
                        max-height="725"
                        :row-style="rowStyle1"
                    >
                        <el-table-column type="selection" width="35" align="center" />
                        <el-table-column label="客资ID" align="center" prop="shopid" />
                        <el-table-column label="客户姓名" align="center" prop="shopuser" />
                        <el-table-column label="交易类型" align="center" prop="payname" />
                        <el-table-column label="收支类型" align="center" width="120">
                        <template slot-scope="scope">
                            <div>{{ scope.row.type == 0 ? '支出' : '收入' }}</div>
                        </template>
                        </el-table-column>
                        <el-table-column label="交易金额" align="center" prop="money" width="120" />
                        <el-table-column
                        label="交易时间"
                        align="center"
                        width="250"
                        >
                          <template slot-scope="scope">
                            <span>{{parseTime(scope.row.paytime, "{YY}-{MM}-{DD}") }}</span>
                          </template>
                        </el-table-column>

                    </el-table>
                    </div>
                    <div class="confirm">
                        <div class="confirm_btn fl-center">
                            <div>导出</div>
                        </div>
                    </div>
                </div>
            </el-drawer>
    </div>
</template>

<script>
import { selectSXShoppayment, selectAllzkwlShoppaymentPC } from "@/api/business/finace.js";
import {parseTime} from "../../../utils/ruoyi";
export default {
    name: "Recharge",
    data() {
        return {
            endtimes:'',
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            flowList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                shopname: "",
                shoptel: "",
                shopuser: "",
                minmoney: "",
                maxmoney: "",
                starttime: "",
                endtime: "",
            },
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
            searchIpt1:'',
            searchIpt2:'',
            searchIpt3:'',
            timePicker1: '',
            drawer: false,
            options1: [{
                selectValue: '选项1',
                label: '支出'
                }, {
                selectValue: '选项2',
                label: '收入'
            }],
            selectValue1: '',
            options2: [{
                selectValue: '选项1',
                label: '客资'
                }, {
                selectValue: '选项2',
                label: '成交'
            }],
            selectValue2: '',
            detailList2: [
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '客资',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '成交',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '客资',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '成交',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '成交',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '客资',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '成交',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '客资',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '客资',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },
        {
          ID: "00001",
          num: 'z0000000000000',
          username1: "黄格格",
          jy_type: '客资',
          type: 0,
          status: 0,
          phone: "1388888888",
          kz_kf: 100,
          pt_kf: '-200.00',
          cjje: 91,
          zhl: '78.12%',
          kf_time: '2024-03-04 10:41:52',
          time: "2020-05-01 12:00:00",
          isTuihui: false,
        },

            ],
        };
    },
    created() {
        this.getList();
    },
    methods: {
      parseTime,
        /** 查询客资交易明细列表 */
        getList() {
            this.loading = true;
            selectAllzkwlShoppaymentPC(this.queryParams).then(response => {
                if (response.code == 200) {
                    this.flowList = response.rows;
                    this.loading = false;
                    this.total = response.total;
                }
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            if (this.queryParams.starttime == '' && this.endtimes == "") {
                selectAllzkwlShoppaymentPC(this.queryParams).then(response => {
                    this.flowList = response.rows;
                    this.total = response.total;
                })
            } else if (this.queryParams.starttime == "" && this.endtimes != '') {
                this.$modal.msgError("请输入开始时间");
            } else if (this.queryParams.starttime != '' && this.endtimes == '') {
                this.$modal.msgError("请输入结束时间");
            } else if (this.queryParams.starttime != '' && this.endtimes != '' && this.queryParams.starttime > this.endtimes) {
                this.$modal.msgError("结束时间必须大于开始时间");
            } else if (this.queryParams.starttime != '' && this.endtimes != '' && this.queryParams.starttime < this.endtimes) {
                this.queryParams.endtime = this.endtimes + 24 * 60 * 60 * 1000 - 1;
                selectAllzkwlShoppaymentPC(this.queryParams).then(response => {
                    this.flowList = response.rows;
                    this.total = response.total;
                })
            }else if ( this.queryParams.startTime == this.queryParams.endtime) {
                this.$modal.msgError("结束时间必须大于开始时间");
            }
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                shopname: "",
                shoptel: "",
                shopuser: "",
                minmoney: "",
                maxmoney: "",
                starttime: "",
                endtime: "",
            };
            this.endtimes="";
            this.getList();
        },
        rowStyle1() {},
        handleSelectionChange3(selection) {
            selection.forEach((item) => {
                // this.searchdata.shopid = item.shopid;
            });
            // this.single = selection.length !== 1
            // this.multiple = !selection.length
            },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.pfId)
            this.single = selection.length !== 1
        },
        // 验证搜索框日期
        beginDate() {
            const self = this;
            return {
                disabledDate(time) {
                //    debugger;
                    if (self.endTime) {
                        //如果结束时间不为空，则小于结束时间
                        return new Date(self.endTime).getTime() < time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        processDate() {
            const self = this;
            return {
                disabledDate(time) {
                    if (self.startTime) {
                        //如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.startTime).getTime() > time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        handlejy(row) {
            this.drawer = true;
            //获取当前店铺的交易明细
          const param = {
            shopid : row.shopid,
          };
          selectAllzkwlShoppaymentPC(param).then(response => {
            if (response.code == 200) {
              this.detailList2 = response.rows;
            }
          });

        },
        handleClose() {
            this.drawer = false;
        },
    }
};
</script>

<style lang="scss" scoped>
.transform_seller {
  display: flex;
  align-items: center;
  font-size: 5rpx;
  color: #23bb7b;
  cursor: pointer;
  img {
    width: 18px;
    height: 18px;
  }
}
.drawer {
    width: 100%;
}
.search_bar1 {
    width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10px 15px;
  box-sizing: border-box;
}
.kz_name {
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 14px;
}
.kh_status {
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 14px;
}
.fp_time {
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 14px;
}
.mobile {
    display: flex;
  align-items: center;
  color: #333333;
  font-size: 14px;
}
.tl_item {
  margin-bottom: 10px;
}.confirm {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 1151px;
  height: 60px;
  box-shadow: 0px 0px 8px 0px #F2F3F5;
  font-size: 14px;
  color: #FFFFFF;
  padding: 14px 20px;
  box-sizing: border-box;
}
.confirm_btn {
  width: 90px;
height: 32px;
background: #5672FA;
border-radius: 4px 4px 4px 4px;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
}
</style>
